﻿@model string

@{    
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section JavascriptInHead{
    <script src="~/Scripts/Instructors/instructors-controller.js"></script>
    <script type="text/javascript">

        //create a service which would be hooked into the controller for data retrieval
        // the module which is known to the html page section or entire page is acting a logical container for service
        registrationModule.factory('bootstrappedInstructors', function ()
        {
            return {
                instructors: @Html.Raw(Model)
                };
        });
        
    </script>
}

<div class="container" ng-controller="InstructorsController">
    <div class="row">
        <div class="span10">
            <h2>Instructors</h2>
        </div>
    </div>
    <div class="row">
        <div class="span10">
            <table class="table  table-condensed table-hover"
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Room Number</th>
                </tr>
                <tr ng-repeat="instructor in instructors">
                    <td>{{instructor.name}}</td>
                    <td>{{instructor.email}}</td>
                    <td>{{instructor.roomNumber}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>
